<template>
    <view class="post-setting">
        <!-- 话题 -->
        <view class="post-tag">
            <han-icon name="topic" size="38" class="tag-icon" />
            <text class="tag-title">话题</text>
            <view class="tag-list" v-if="categoryList.length > 0">
                <han-tag
                    v-for="category in categoryList"
                    :key="category.categoryId"
                    :text="category.chineseName"
                    :active="
                        postStore.selectedCategoryId === category.categoryId
                    "
                    @click="handleCategoryClick(category.categoryId)"
                />
            </view>
        </view>

        <!-- 地点 -->
        <view class="post-location">
            <han-icon name="location" size="38" class="location-icon" />
            <text class="location-title">地点</text>
            <view class="location-list">
                <view class="location-item">#地点</view>
            </view>
            <han-icon name="search" size="38" />
        </view>

        <!-- 状态 -->
        <view class="post-state">
            <han-icon name="unlocked" size="38" />
            <text class="state-title">公开</text>
        </view>

        <view class="post-timing">
            <han-icon name="timing" size="36" />
            <text class="button-title">定时发布</text>
            <han-icon name="advance" size="36" class="icon-advance" />
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getPostCategory } from '@/apis/categoryAPI';
import { CATEGORY_TRANSLATIONS } from '@/util/config/post.config.js';
import { usePostStore } from '@/stores/postStores';

const postStore = usePostStore();
// 分类列表
const categoryList = ref([]);

// 处理点击话题
let handleCategoryClick = (categoryId) => {
    postStore.setSelectedCategoryId(
        postStore.selectedCategoryId === categoryId ? null : categoryId
    );
};

// 初始化加载分类
onMounted(async () => {
    try {
        const res = await getPostCategory();

        const rawList = res.data.data.flatMap((parent) => parent.subCategories);

        rawList.sort((a, b) => a.categoryId - b.categoryId);

        // 为每个分类添加 chineseName 字段
        categoryList.value = rawList.map((category) => {
            const parentTranslations =
                CATEGORY_TRANSLATIONS[category.parentCategoryName];

            return {
                ...category,
                chineseName:
                    parentTranslations?.[category.categoryName] ||
                    category.categoryName
            };
        });
    } catch (err) {
        console.error('加载分类失败', err);
    }
});
</script>

<style lang="scss">
.post-setting {
    .post-tag {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        border-bottom: 1rpx solid $han-global-border-color;
        height: 70rpx;

        .tag-title {
            width: 70rpx;
            margin: 0 10rpx;
        }

        .tag-list {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            width: 90%; /* 给滚动留出空间 */
            height: 50rpx;
            -webkit-overflow-scrolling: touch; /* 改善移动端滚动体验 */
            scrollbar-width: none; /* 隐藏滚动条（Firefox） */
            -ms-overflow-style: none;

            // 隐藏滚动条（全平台兼容）
            ::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
                color: transparent;
            }

            // 防止在移动设备上出现默认的滚动条样式
            * {
                -webkit-tap-highlight-color: transparent;
            }
        }
    }

    .post-location {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        border-bottom: 1rpx solid $han-global-border-color;
        height: 70rpx;

        .location-title {
            width: 70rpx;
            margin: 0 10rpx;
        }

        .location-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
            overflow-x: auto;
            width: 80%;
            height: 70rpx;
        }
    }

    .post-state {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        border-bottom: 1rpx solid $han-global-border-color;
        height: 60rpx;

        .state-title {
            width: 70rpx;
            margin: 0 10rpx;
        }
    }

    .post-timing {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        border-bottom: 1rpx solid $han-global-border-color;
        height: 60rpx;

        .button-title {
            margin: 0 10rpx;
        }

        .icon-advance {
            margin-left: auto;
        }
    }
}
</style>
